<template>
	<view class="my">
		<image src="/static/imgs/my-bg4.png" mode="aspectFill" class="my_bg"></image>
		<view class="header_cell">
			<view class="user_info">
				<view class="flex justify-center align-center">
					<view class="cu-avatar radius me-avator">
						<text class="cuIcon-people"></text>
					</view>
					<view>
						<view class="text-black text-bold">
							<text class="text-xl" style="font-weight: bold;">{{user.userName}}</text>
<!-- 							<text class="cu-tag round bg-red" style="margin-left: 20rpx;">未实名</text> -->
						</view>
						<view class="text-grey">
							<span>{{user.mobileNum}}</span>
						</view>
					</view>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="auth_btn">
				<button class="cu-btn round bg-black" @tap="logout()">
					<text class="lg text-white cuIcon-back_android" style="margin-right: 20rpx;"></text>
					退出登录
				</button>
			</view>

	<!-- 		<view class="vip_cell flex justify-between align-center">
				<view>
					<view class="text-xl" style="font-weight: bold;color: rgb(241, 198, 142);">
						1030 积分
						<text class="lg cuIcon-vip" style="margin-left: 15rpx;"></text>
					</view>
					<view class="text-xs" style="margin-top: 10rpx;">邀请彦祖赚取更多积分</view>
				</view>
				<button class="cu-btn round invate_btn">邀 请</button>
			</view> -->
		</view>
		<!-- <view class="cell_1 flex justify-around align-center bg-white mt30" style="padding: 30rpx 0;border-radius: 15rpx;text-align: center;">
			<view>
				<view class="cell_1_icon flex justify-center align-center"><text class="text-gray cuIcon-refresh"></text></view>
				<view>刷新</view>
			</view>
			<view>
				<view class="cell_1_icon flex justify-center align-center"><text class="text-gray cuIcon-settings"></text></view>
				<view>个人信息设置</view>
			</view>
			<view>
				<view class="cell_1_icon flex justify-center align-center"><text class="text-gray cuIcon-full"></text></view>
				<view>全屏轮播</view>
			</view>
		</view>
		<view class="cell_2 flex justify-between align-center mt30">
			<view>
				<view class="cell_2_icon flex justify-center align-center"><text class="text-olive cuIcon-list"></text></view>
				<view>列表(全屏滑动轮播)</view>
			</view>
			<view>
				<view class="cell_2_icon flex justify-center align-center"><text class="text-cyan cuIcon-form"></text></view>
				<view>表单提交(带验证)</view>
			</view>
		</view>
		<view class="mt30 grid text-center col-4 bg-white" style="padding: 30rpx 0; border-radius: 15rpx;row-gap: 30rpx;">
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-olive cuIcon-friendfamous"></text></view>
				<view>登录</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-selection"></text></view>
				<view>登录</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-explorefill"></text></view>
				<view>Flex完美布局</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-similar"></text></view>
				<view>发现壁纸</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-vipcard"></text></view>
				<view>甜蜜修勾</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-barcode"></text></view>
				<view>甜蜜修勾</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-upstagefill"></text></view>
				<view>甜蜜修勾</view>
			</view>
			<view>
				<view class="cell_3_icon flex justify-center align-center"><text class="text-cyan cuIcon-clothesfill"></text></view>
				<view>甜蜜修勾</view>
			</view>
		</view>
		<view class="cell_4 mt30 bg-white" style="padding:40rpx 30rpx; border-radius: 15rpx;">
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-repair" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>甜蜜修勾</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-hot" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>甜蜜修勾</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-crown" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>使用协议</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-musicfill" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>使用协议</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view class="cell_4 mt30 bg-white" style="padding:40rpx 30rpx; border-radius: 15rpx;">
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-weixin" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>联系客服</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-formfill" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>提交反馈</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-dianhua" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>技术支持</text>
				</view>
				<text class="cu-tag radius sm">177****3698</text>
			</view>
			<navigator class="flex justify-between align-center" open-type="navigateBack" :delta="1">
				<view class="flex justify-center align-center">
					<text class="text-gray cuIcon-formfill" style="margin-right: 20rpx;font-size: 40rpx;"></text>
					<text>返回上一页</text>
				</view>
				<text class="lg text-gray cuIcon-right"></text>
			</navigator>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			user:{}
		};
	},
	mounted() {
		let user = uni.getStorageSync("user"); 
		this.user = user;
	},
	methods: {
		logout(){
			uni.clearStorageSync('user');
			uni.clearStorageSync('token');
			uni.navigateTo({
				url: '/pages/login/index',
			})
		}
		
	}
};
</script>

<style lang="less" scoped>
.my {
	padding: 30rpx;
	.mt30 {
		margin-top: 30rpx;
	}
	.my_bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
	}
	.header_cell {
		margin-top: 100rpx;
		.user_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.user_photo {
				width: 120rpx;
				height: 120rpx;
				box-shadow: 0px 0px 10rpx 1px rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				background-color: white;
				margin-right: 20rpx;
			}
		}
		.auth_btn {
			margin: 50rpx auto;
			text-align: center;
			& > button {
				box-shadow: 3px 3px 10rpx 1px rgba(0, 0, 0, 0.2);
				padding-left: 50rpx;
				padding-right: 50rpx;
			}
		}
		.vip_cell {
			margin-top: 40rpx;
			width: 690rpx;
			height: 150rpx;
			background-image: url('/static/imgs/vip_bg.png');
			background-size: 100% 100%;
			color: white;
			padding: 0 30rpx;
			.invate_btn {
				background-color: rgb(241, 198, 142);
				box-shadow: 3px 3px 10rpx 1px rgba(241, 198, 142, 0.5);
				width: 150rpx;
				color: rgb(99, 71, 56);
				font-weight: bold;
			}
		}
	}
	.cell_1_icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #f4f2f7;
		border-radius: 50%;
		font-size: 50rpx;
		margin: 0 auto;
		margin-bottom: 15rpx;
	}
	.cell_2 {
		& > view {
			background-color: white;
			border-radius: 15rpx;
			text-align: center;
			width: 48%;
			padding: 30rpx 0;
		}
		.cell_2_icon {
			font-size: 60rpx;
			margin-bottom: 15rpx;
		}
	}
	.cell_3_icon {
		font-size: 50rpx;
		margin-bottom: 20rpx;
	}
	.cell_4{
		&>view,navigator{
			padding: 20rpx 0;
		}
	}
	
	.me-avator{
		margin-right: 20rpx;
	}
}
</style>
